<template>

	<view class="">
		<!-- <view :style="{'padding-top':statusBarHeight + 'px'}" :class="[hidePage ? 'hide' : '']"> -->
		<view class="top" :style="{'padding-top':statusBarHeight + 'px'}">
			<view class="searchWrap">
				<view class="logout">退出</view>
				<view class="searchbox">
					<image src="../../static/bank/icon/search.svg" class="searchIcon"></image>
					<input class="management" type="text" placeholder="安心理财专区">
					<image src="../../static/bank/icon/voice.svg" class="audioIcon"></image>
				</view>
				<view class="otherWrap">
					<image src="../../static/bank/icon/qb.svg" class="otherIcon" style="width:76rpx;height: 76rpx;">
					</image>
					<image src="../../static/bank/icon/kf.svg" class="otherIcon"
						style="width:76rpx;height: 76rpx;margin: 0 10rpx;"></image>
					<image src="../../static/bank/icon/sys.svg" class="otherIcon" style="width:76rpx;height: 76rpx;">
					</image>
				</view>
			</view>
			<view class="mineWrap">
				<view @click="goTo" class="mineItme">
					<image src="../../static/bank/icon/wdzh.png" class="mineIcon"></image>
					<text>我的账户</text>
				</view>
				<view class="mineItme">
					<image src="../../static/bank/icon/wdzc.png" class="mineIcon"></image>
					<text>我的资产</text>
				</view>
				<view class="mineItme">
					<image src="../../static/bank/icon/wdaq.png" class="mineIcon"></image>
					<text>我的安全</text>
				</view>
				<view class="mineItme">
					<image src="../../static/bank/icon/wdzf.png" class="mineIcon"></image>
					<text>我的支付</text>
				</view>
			</view>
		</view>
		<view class="iconList">
			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/zz.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">转账</text>
			</view>

			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/dk.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">贷款</text>
			</view>

			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/xyk.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">信用卡</text>
			</view>

			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/shjf.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">生活缴费</text>
			</view>

			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/zx.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">咨询</text>
			</view>
		</view>

		<view class="iconList">
			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/ylzq.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">养老专区</text>
			</view>

			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/hdzx.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">活动中心</text>
			</view>

			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/yjbk.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">一键绑卡</text>
			</view>

			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/zbsp.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">直播视频</text>
			</view>

			<view class="icon_box">
				<view class="icon">
					<image src="../../static/bank/icon/qb.png" mode="" class="icon_image"></image>
				</view>
				<text class="text">全部</text>
			</view>
		</view>




		<view class="newsList">
			<view class="newsList_left">
				<view class="newsList_left_content">
					<view class="jx">
						精选
					</view>

					<view class="text">
						商超立减，单单折扣低至9.8折！
					</view>
				</view>


				<view class="newsList_left_content">
					<view class="jx">
						精选
					</view>

					<view class="text">
						月领6元打车红包
					</view>
				</view>
			</view>
			<!-- <view class="newList_line"></view> -->
			<view class="newList_right">
				<view class="" style="text-align: center;transform: ">
					<image style="width: 70rpx;height: 70rpx;transform: translateX(16rpx);"
						src="../../static/image/message.svg" mode=""></image>
				</view>
				<view class="" style="text-align: center;transform: translateY(-20rpx);">
					<text style="font-size: 10px;">消息</text>
				</view>
			</view>

		</view>
		<view class="banner">
			<image class="img" src="../../static/bank/icon/jjkwxsbyl.svg" mode=""></image>
		</view>
		<view class="banner2">
			<image class="img" src="../../static/bank/icon/dktj.svg" mode=""></image>
		</view>
		
		<view class="banner3">
			<image class="img" src="../../static/bank/icon/hdzx.svg" mode=""></image>
		</view>
		
		<view class="banner4">
			<image class="img" src="../../static/bank/icon/cfq.svg" mode=""></image>
		</view>
	<!-- 	<view class="commonWrap winnowList"></view>
		<view class="commonWrap recommendList"></view> -->
		<view class="foot">
			<view class="content">
				<view class="content_content">
					<view class="icons">
						<image style="width: 38rpx;height: 40rpx;" src="../../static/bank/icon/foot-sy.png" mode=""></image>
					</view>
					
					<view style="font-size: 10px;" class="text">
						首页
					</view>
				</view>
				
				
				<view class="content_content">
					<view class="icons">
						<image style="width: 38rpx;height: 40rpx;" src="../../static/bank/icon/foot-jr.png" mode=""></image>
					</view>
					
					<view style="font-size: 10px;" class="text">
						金融
					</view>
				</view>
				
				
				<view class="content_content">
					<view class="icons">
						<image style="width: 38rpx;height: 40rpx;" src="../../static/bank/icon/foot-sh.png" mode=""></image>
					</view>
					
					<view style="font-size: 10px;" class="text">
						生活
					</view>
				</view>
				
				<view class="content_content">
					<view class="icons">
						<image style="width: 38rpx;height: 40rpx;" src="../../static/bank/icon/foot-sq.png" mode=""></image>
					</view>
					
					<view style="font-size: 10px;" class="text">
						社区
					</view>
				</view>
				
				<view class="content_content">
					<view class="icons">
						<image style="width: 38rpx;height: 40rpx;" src="../../static/bank/icon/foot-gr.png" mode=""></image>
					</view>
					
					<view style="font-size: 10px;" class="text">
						个人
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				hidePage: false,
				// 顶部安全距离
				statusBarHeight: 0,
				// 底部安全距离
				safeAreaInsets: 0,
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			gonavigate(item) {
				uni.navigateTo({
					url: item.jumpUrl
				})
			},
			goTo() {
				uni.navigateTo({
					url: "/pages/bank/mine"
				})
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
			console.log(this.statusBarHeight);
			// let time = Date.parse('2023-06-18 10:10:00')
			// let currentTime = Date.parse(new Date())
			// if (currentTime > time) {
			// 	this.hidePage = true
			// }
		}
	};
</script>

<style>
	page,
	body {
		background-color: rgb(247, 247, 247);
	}

	.hide {
		display: none;
	}


	.top {
		width: 100%;
		/* height: 370rpx; */
		padding-bottom: 26rpx;
		background: #5479e3;
		background: linear-gradient(#5479e3 100%, #75a8f9 60%);
	}

	.logout {
		width: 10%;
		margin-right: 40rpx;
		font-size: 32rpx;
		white-space: nowrap;
	}

	.searchWrap {
		color: #fff;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 30rpx 0 30rpx;
	}

	.searchbox {
		width: 60%;
		height: 52rpx;
		border: 1rpx solid #fff;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #7898ed;
		padding: 0 15rpx 0 15rpx;
		margin-right: 30rpx;
	}

	>>>.uni-input-input {
		height: 52rpx;
		font-size: 24rpx !;
	}

	.uni-input-placeholder {
		font-size: 24rpx;
	}

	.uni-input-placeholder {
		color: #fff;

	}

	.searchIcon {
		width: 46rpx;
		height: 46rpx;
		margin-right: 20rpx;
	}

	.audioIcon {
		width: 54rpx;
		height: 54rpx;
	}

	.otherWrap {
		width: 22%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.otherWrap .otherIcon {
		width: 60rpx;
		height: 60rpx;
		margin: 0 10rpx;
	}

	.mineWrap {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		padding: 0 50rpx;
	}

	.mineItme {
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		/* position: relative; */
	}

	.mineIcon {
		transform: translateX(20rpx);
		width: 75rpx;
		height: 75rpx;
		margin-bottom: 10rpx;
	}

	.iconList {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.iconList .icon_box {
		text-align: center;
		width: 120rpx;
	}

	.iconList .icon_box .icon .icon_image {
		width: 50rpx;
		height: 50rpx
	}

	.icon_box .text {
		white-space: nowrap;
		font-size: 24rpx;
	}

	.newsList {
		width: 700rpx;
		padding: 20rpx 20rpx 0;
		background-color: #fff;
		border-radius: 8px;
		box-sizing: border-box;
		margin: 30rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.newsList .newsList_left {
		width: 500rpx;
		margin-top: 14rpx;
		/* border-right: 1px solid rgb(239, 241, 242); */
	}

	.newsList .newsList_left:first-child {
		margin-top: 0;
	}

	.newsList_left .newsList_left_content {
		margin-bottom: 20rpx;
	}

	.newsList_left .newsList_left_content:first {
		margin-top: 0;
	}

	.newsList_left .newsList_left_content::after {
		content: "";
		display: block;
		visibility: hidden;
		clear: both;
	}

	.newsList_left .newsList_left_content .jx {
		width: 60rpx;
		height: 40rpx;
		background-color: rgb(231, 240, 251);
		color: rgb(120, 165, 235);
		font-size: 10px;
		text-align: center;
		line-height: 40rpx;
		border-radius: 4px;
		float: left;
	}

	.newsList_left .newsList_left_content .text {
		color: rgb(49, 49, 49);
		font-size: 28rpx;
		margin-left: 20rpx;
		float: left;
	}

	.newList_line {
		width: 1px;
		height: 90rpx;
		border-right: 1px solid rgb(239, 241, 242);
	}

	.newList_right {
		width: 100rpx;
		/* height: 90rpx; */
		border-left: 1px solid rgb(239, 241, 242);
		transform: translateY(-8rpx);
	}
	.banner {
		width: 700rpx;
		margin-top: 10rpx;
		margin: 0 auto;
	}
	.banner .img {
		width: 100%;
		height: 268rpx;
	}
	
	.banner2 {
		width: 700rpx;
		margin-top: 10rpx;
		margin: 0 auto;
	}
	.banner2 .img {
		width: 700rpx;
		height: 440rpx;
	}
	
	.banner3 {
		width: 700rpx;
		margin-top: 10rpx;
		margin: -30rpx auto 0;
	}
	.banner3 .img {
		width: 700rpx;
		height: 552rpx;
	}
	
	.banner4 {
		width: 700rpx;
		margin: -70rpx auto 0;
	}
	.banner4 .img {
		width: 700rpx;
		height: 570rpx;
	}
	
	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 150rpx;
		background-color: rgb(247, 247, 247);
	}
	.foot .content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:18rpx 25rpx;
		box-sizing: border-box;
	}
	.content .content_content {
		width: 90rpx;
		text-align: center;
	}
</style>